<template>
  <transition name="showHeader">
    <div class="header-animat">
      <a-layout-header
        :class="[
          fixedHeader && 'ant-header-fixedHeader',
          collapsed ? 'ant-header-side-closed' : 'ant-header-side-opened',
        ]"
        :style="{ padding: '0' }"
      >
        <div class="header" :style="{ background: primaryColor, color: '#fff' }">
          <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
          
        </div>
      </a-layout-header>
    </div>
  </transition>
</template>

<script>
 
  export default {
    name: 'GlobalHeader',
    components: {  },
    props: {
      primaryColor: {
        type: String,
        required: true,
      },
      fixedHeader: {
        type: Boolean,
        required: false,
        default: true,
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false,
      },
    },
    methods: {
      toggle() {
        this.$emit('toggle')
      },
    },
  }
</script>

<style scoped lang="less"></style>
